<template>
  <div>
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
        <el-form-item label="下架名称" prop="unshelfName">
          <el-input v-model="form.unshelfName" size="small" placeholder="请输入下架名称"/>
        </el-form-item>
        <el-form-item label="统计周期" prop="cycle">
          <el-input v-model="form.cycle" size="small" placeholder="请输入统计周期"/>
        </el-form-item>
        <el-form-item label="访客数量" prop="visitorLess">
          <el-input v-model="form.visitorLess" size="small" placeholder="请输入访客数量" style="width: 300px"
                    class="mr10">
            <template slot="prepend">小于</template>
            <template slot="append">访客</template>
          </el-input>
          <el-checkbox v-model="form.history">且历史从未出单</el-checkbox>
        </el-form-item>
        <el-form-item label="亏损情况" prop="lossPercentage">
          <el-checkbox v-model="lossPercentageValue" class="flex mb10">
            <el-input v-model="form.lossPercentage" style="width: 350px" size="small"
                      placeholder="请输入亏损百分比数值">
              <template slot="prepend">亏损</template>
              <template slot="append">%以上</template>
            </el-input>
          </el-checkbox>
          <el-checkbox v-model="lossAmountValue" class="flex">
            <el-input v-model="form.lossAmount" style="width: 300px" size="small" placeholder="请输入亏损金额">
              <template slot="prepend">亏损</template>
              <template slot="append">元以上</template>
            </el-input>
          </el-checkbox>
        </el-form-item>
        <el-form-item label="一次下架" prop="unshelfPercentage">
          <el-checkbox v-model="shelfPercentageValue" class="flex">
            <el-input v-model="form.unshelfPercentage" size="small" placeholder="请输入下架百分比数值">
              <template slot="prepend">不超过总在线商品数量的</template>
              <template slot="append">%</template>
            </el-input>
          </el-checkbox>
          <el-checkbox v-model="shelfGoodsNumValue" class="flex mt10">
            <el-input v-model="form.unshelfNum" size="small" placeholder="请输入下架商品数量">
              <template slot="prepend">不超过</template>
              <template slot="append">个商品</template>
            </el-input>
          </el-checkbox>
        </el-form-item>
        <el-form-item label="下架后自动上架" prop="autoShelf">
          <el-radio-group v-model="form.autoShelf">
            <el-radio label="0">否</el-radio>
            <el-radio label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上架个数" prop="shelfNum">
          <el-radio-group v-model="form.isEqUnshelf">
            <el-radio label="1">与下架个数相同</el-radio>
            <el-radio label="0">自定义</el-radio>
          </el-radio-group>
          <el-input v-if="form.isEqUnshelf=='0'" v-model="form.shelfNum" style="width: 250px" class="ml10" size="small"
                    placeholder="请输入上架商品数量">
            <template slot="append">个商品</template>
          </el-input>
        </el-form-item>
        <el-form-item label="上架计划" prop="isOriginal">
          <el-radio-group v-model="form.isOriginal">
            <el-radio label="1">按下架商品的原上架计划执行</el-radio>
            <el-radio label="0">自定义</el-radio>
          </el-radio-group>
          <el-select class="ml5" v-if="form.isOriginal=='0'" v-model="form.shelfId"
                     placeholder="请选择品牌" filterable clearable size="small">
            <el-option v-for="dict in groundList" :key="dict.id" :label="dict.name" :value="dict.id"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {editProject, queryProjectById} from "@/api/autoOperation/cutPrice";
import {queryAutoConfigList} from "@/api/autoOperation/autoConfig";
import {saveUnShelfConfig, selectById} from "@/api/autoOperation/offShelf"

export default {
  name: "grounding",
  props: {
    storeId: {},
    configId: {
      type: String,
      default: ""
    },
    userId: { // 绑定店铺的用户id
      type: String,
      default: ""
    },
    storeUserName: { //店铺账号 cn码
      type: String,
      default: ""
    },
    isUseShareCode: { // 是否使用分享码
      type: String,
      default: "0"
    }
  },
  data() {
    return {
      buttonLoading: false,//确定提交表单按钮loading
      title: "新增下架配置",
      open: true,
      form: {},
      rules: {
        unshelfName: [{required: true, message: "下架名称不能为空", trigger: "blur"}],
        cycle: [{required: true, message: "统计周期不能为空"},
          {validator: this.$Validate.isPositiveInteger}],
        visitorLess: [{required: true, message: "访客数量不能为空", trigger: "blur"},
          {validator: this.$Validate.isPositiveInteger}],
        // lossPercentage: [{required: false, validator: this.checkLossPercentage, trigger: "blur"},
        //   {required: false, validator: this.checkLossNum}],
        unshelfPercentage: [{required: true, validator: this.checkOnceShelfPercentage, trigger: "blur"},
          {validator: this.checkOnceShelfNum}],
        unshelfNum: [{required: true, message: "下架商品数量不能为空", trigger: "blur"}],
        autoShelf: [{required: true, message: "请选择", trigger: "change"}],
        shelfNum: [{required: true, validator: this.checkGroundNumber}],
        isOriginal: [{required: true, message: "请选择上架计划", trigger: "change"},
          {validator: this.checkIsOriginal}],
      },
      groundList: [],//上架列表
      lossPercentageValue: true,//亏损百分比
      lossAmountValue: true,//亏损金额
      shelfPercentageValue: true,//下架百分比
      shelfGoodsNumValue: true,//下架数量
    }
  },
  created() {
    this.getGroundList()
  },
  methods: {
    // 校验上架计划
    checkIsOriginal(rule, value, callback) {
      let value2 = this.form.shelfId
      if (value == '0' && !value2) {
        callback(new Error("请选择上架计划！"));
      } else {
        callback();
      }

    },
    // 校验上架商品个数
    checkGroundNumber(rule, value, callback) {
      if (this.form.isEqUnshelf == '0') {
        this.$Validate.isPositiveInteger(rule, value, callback)
      } else {
        callback();
      }
    },
    // 校验亏损数量
    checkLossNum(rule, value, callback) {
      if (!this.lossPercentageValue && !this.lossAmountValue) {
        callback(new Error("请选择亏损情况至少其中一项！"));
      }
      if (this.lossAmountValue) { //如果选中亏损金额复选框
        if (!this.form.lossAmount) {
          callback(new Error("亏损金额不能为空！"));
        } else {
          this.$Validate.isPositiveInteger(rule, this.form.lossAmount, callback)
        }
      } else {
        callback();
      }
    },
    // 校验亏损百分比
    checkLossPercentage(rule, value, callback) {
      if (!this.lossPercentageValue && !this.lossAmountValue) {
        callback(new Error("请选择亏损情况至少其中一项！"));
      }
      if (this.lossPercentageValue) { //如果选中百分比复选框
        if (!this.form.lossPercentage) {
          callback(new Error("亏损百分比数值不能为空！"));
        } else {
          this.$Validate.isPositiveInteger(rule, value, callback)
        }
      } else {
        callback();
      }
    },
    // 校验一次下架商品数量
    checkOnceShelfNum(rule, value, callback) {
      if (!this.shelfGoodsNumValue && !this.shelfPercentageValue) {
        callback(new Error("请选择一次下架至少其中一项！"));
      }
      if (this.shelfGoodsNumValue) {
        if (!this.form.unshelfNum) {
          callback(new Error("一次下架商品数量不能为空！"));
        } else {
          this.$Validate.isPositiveInteger(rule, this.form.unshelfNum, callback)
        }
      } else {
        callback();
      }
    },
    // 校验一次下架百分比
    checkOnceShelfPercentage(rule, value, callback) {
      if (this.shelfPercentageValue) { // 如果选中百分比复选框
        if (!this.form.unshelfPercentage) {
          callback(new Error("一次下架百分比数值不能为空！"));
        } else {
          this.$Validate.isPositiveInteger(rule, value, callback)
        }
      } else {
        callback();
      }
    },
    // 获取上架列表
    getGroundList() {
      let data = {
        storeId: this.storeId,
        type: 0
      }
      queryAutoConfigList(data).then(res => {
        let list = res.data
        this.groundList = list
        if (this.configId) {
          this.getConfigDetail()
        } else {
          this.reset()
        }
      })
    },
    // 获取下架配置详情
    getConfigDetail() {
      this.title = "修改下架配置"
      selectById({id: this.configId}).then(res => {
        let data = res.data
        for (let key in data) { //将所有字符转成字符串
          if (data[key] != null) {
            data[key] = '' + data[key]
          }
        }
        this.form = data
        this.lossAmountValue = data.lossAmount ? true : false
        this.lossPercentageValue = data.lossPercentage ? true : false
        this.shelfPercentageValue = data.unshelfPercentage ? true : false
        this.shelfGoodsNumValue = data.unshelfNum ? true : false
        this.form.history = data.history == '0' ? false : true
      })
    },
    // 确定提交
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.$confirm('是否确定提交下架计划？').then(() => {
            this.form.history = this.form.history ? '1' : '0';
            if (this.isUseShareCode == '1') {
              this.form.id = undefined;
              this.form.storeId = this.storeId
              this.form.userId = this.userId
              this.form.storeUserName = this.storeUserName
            }
            saveUnShelfConfig(this.form).then(res => {
              this.$message.success(res.msg)
              this.cancel()
            })
          })
        }
      })
    },
    // 重置
    reset() {
      this.form = {
        id: undefined,
        unshelfName: undefined,
        cycle: undefined,
        visitorLess: undefined,
        history: true,
        lossPercentage: undefined,
        lossAmount: undefined,
        unshelfPercentage: undefined,
        unshelfNum: undefined,
        autoShelf: '1',
        isEqUnshelf: '1',
        shelfNum: undefined,
        isOriginal: '1',
        shelfId: undefined,
        storeId: this.storeId,
        storeUserName: this.storeUserName,
        userId: this.userId,
      }
      this.resetForm("form");
    },
    // 取消
    cancel() {
      this.$emit('close', false)
    },
  }
}
</script>

<style scoped>

</style>
